<template>
	<main-content>
		<z-paging ref="paging" v-model="listData" @query="getList" @loadingStatusChange='nextPage'>
			<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
			<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
			<template #top>
				<view class="p-16">
					<view class="">
						<u-search placeholder="请输入商户名称" :clearabled='true' v-model="queryForm.merchantName"
							:show-action="false" shape='square' @input="onSearch"></u-search>
						<!--  @blur='getList' -->
					</view>
				</view>
			</template>
			<view class="flex flex-col"> <!-- style="height: 100vh;" -->
				<view class="content-color grow p-y-16" v-if="total > 0">
					<view class="my-card-border" v-for="(item,index) in listData" :item='item.id'>
						<u-card :foot-border-top='false' :head-border-bottom='false' :show-foot='false'
							margin='0rpx 30rpx 16rpx' @click='showView(item)'>
							<template #head>
								<view class="flex flex-row justify-between">
									<group-title>
										<template #icon>
											<view class="main-color">
												<u-icon name="title-icon" custom-prefix="custom-icon" />
											</view>
										</template>
										{{item.merchantName}}</group-title>
									<!-- <view class="">
										{{selectDictLabel(ZZB_MCH_NO_STATUS,item.status)}}
									</view> -->
								</view>
							</template>
							<template #body>
								<view class="flex flex-row justify-between m-b-8">
									<view class="list-title">
										支付通道
									</view>
									<view class="list-value">
										{{item.channelName}}
									</view>
								</view>
								<!-- <view class="flex flex-row justify-between m-b-8">
									<view class="list-title">
										授权业务
									</view>
									<view class="list-value">
										{{selectDictLabel(AUTH_BUSS_TYPE,item.authBussType)}}
									</view>
								</view> -->
								<view class="flex flex-row justify-between">
									<view class="list-title">
										签约账号
									</view>
									<view class="list-value">
										{{item.account}}
									</view>
								</view>
							</template>
						</u-card>
					</view>
				</view>
			</view>
			<view class="operate-box flex justify-content w100">
				<u-button @click="addBtn" size='medium' shape='circle' type="primary">
					<u-icon name="plus-circle-fill" class="p-r-10" />
					新增进件
				</u-button>
			</view>
		</z-paging>
	</main-content>
</template>
<script setup name='index'>
	import {
		reactive,
		ref,
		getCurrentInstance,
		onMounted,
		computed
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app'
	import {
		useCommonStore
	} from '@/stores/common.js'
	import {
		useUserStore
	} from '@/stores/user.js'
	import {
		ZZB_MCH_NO_STATUS,
		AUTH_BUSS_TYPE
	} from '@/common/dict.js'
	import {
		debounce,
		selectDictLabel
	} from '@/common/common.js'
	import {
		registApi
	} from '@/pages-menus/common/api/regist/index.js'
	const commonStore = useCommonStore()
	const {
		proxy
	} = getCurrentInstance()

	const ZZB_MCH_NO_STATUS_M = [{
		name: '全部'
	}, ...ZZB_MCH_NO_STATUS]

	const maiColor = computed(() => {
		return proxy.$System.maiColor.value
	})

	const initForm = {
		merchantName: undefined,
		pageNo: 1,
		pageSize: 10,
	}
	const queryForm = ref({
		...initForm
	})
	const onSearch = (value) => {
		paging.value.reload()
	}

	const paging = ref(null)

	const total = ref(0)
	const listData = ref()
	// 获取数据列表
	const getList = async (pageNo, pageSize, ) => {
		// 统一显示加载框
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		queryForm.value.pageNo = pageNo ?? 1
		queryForm.value.pageSize = pageSize ?? 10
		let res = await registApi.page(queryForm.value)
		// listData.value = res.data
		total.value = res.total
		paging.value.complete(res.data);
		// 隐藏加载框
		uni.hideLoading()
	}

	const scrollTop = ref(0)
	// 重置查询条件
	function resetQuery() {
		total.value = 0
		scrollTop.value = 0
		queryForm.value = {
			...initForm
		}
	}

	// 下拉刷新被触发
	const onRefresh = () => {
		// 告知z-paging下拉刷新结束，这样才可以开始下一次的下拉刷新
		paging.value.complete();
	}

	// 下一页
	const nextPage = (val) => {
		console.log('val', val);
	}

	const addBtn = () => {
		proxy.$System.goTo('/pages-menus/pages/regist/regist-form', {
			type: 'add'
		})
	}
	const showView = (row) => {
		let data = {
			rowData: row
		}
		proxy.$System.goTo('/pages-menus/pages/regist/product-list', data)
	}
	onLoad(async (options) => {
		// 动态设置标题
		// uni.setNavigationBarTitle({
		// 	title: '标题'
		// })
	})
	onReady(() => {
		// paging.value.reload()
	})
</script>
<style lang='scss' scoped>
	.operate-box {
		position: fixed;
		z-index: 99;
		bottom: 50rpx;
	}

	:deep(.zp-paging-container) {
		background-color: #F6F7F9;
	}

	:deep(.u-card .u-card__head) {
		padding: 15px 15px 0 15px !important;
	}

	:deep(.u-card .u-card__foot) {
		padding: 0 15px 15px 15px !important;
	}
</style>